<html>
  <head>
    <title>block layout</title>
    <link href="./test_block_layout.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="container">
      <div class="example">
        <div class="example__title">(0) Basic</div>
        <div class="example__content">
          <div class="box w-auto"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box w-auto"></div>
          <div class="box w-3">w-3</div>
          <div class="box w-3 ml-auto">w-3 ml-auto</div>
          <div class="box w-3 ml-auto mr-auto">w-3 ml-auto mr-auto</div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block"></div>
        </div>
      </div>
      <div class="example">
        <div class="example__title">(1) Width</div>
        <div class="example__content">
          <div class="box w-min-50 d-inline-block">min-width: 50%; display: inline-block</div>
          <div class="box w-50">width: 50%; display: block</div>
          <div class="box w-100">width: 100%; display: block</div>
          <div class="box w-50 d-inline-block">width: 50%; display: inline-block</div>
          <div class="box w-50 d-inline-block">width: 50%; display: inline-block</div>
          <div class="box w-25 d-inline-block">width: 25%; display: inline-block</div>
          <div class="box w-25 d-inline-block">width: 25%; display: inline-block</div>
          <div class="box w-25 d-inline-block">width: 25%; display: inline-block</div>
          <div class="box w-25 d-inline-block">width: 25%; display: inline-block</div>
        </div>
      </div>
      <div class="example">
        <div class="example__title">(2) Auto size</div>
        <div class="example__content">
          <div id="test-text-auto-height" class="box h-auto w-4">block, limited width</div>
          <div id="test-text-auto-size" class="box d-inline-block w-auto h-auto">inline block, auto size</div>
          <div id="test-text-block-auto-height" class="box w-auto h-auto">block, auto size</div>
        </div>
      </div>
      <div class="example">
        <div class="example__title">(3) Margin</div>
        <div class="example__content">
          <div class="box-padding">
            <div class="box w-auto m-2">margin: 16px</div>
            <div class="box d-inline-block m-1">m-1</div>
            <div class="box d-inline-block m-1">m-1</div>
            <div class="box d-inline-block m-1">m-1</div>
            <div class="box d-inline-block m-1">m-1</div>
            <div class="box d-inline-block mr--2">mr--2</div>
            <div class="box d-inline-block w-3 m-1">w-3 m-1</div>
            <div class="box d-inline-block w-2 ml--2">w-2 ml--2</div>
            <div class="box w-auto m--2">margin: -16px</div>
          </div>
          <div class="box-padding">
            <div class="box w-auto">w-auto</div>
            <div class="box w-auto ml--1">w-auto ml--1</div>
            <div class="box w-auto ml--1 mr--1">w-auto ml--1 mr--1</div>
            <div class="box w-4 ml--1 mr--1">width: 200px; margin-left: -8px; margin-right: -8px</div>
            <div class="box w-100 ml--1 mr--1">width: 100%; margin-left: -8px; margin-right: -8px</div>
          </div>
        </div>
      </div>
      <div class="example">
        <div class="example__title">(4) vertical-align</div>
        <div class="example__content">
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block h-2"></div>
          <div class="box d-inline-block vertical-align-middle">middle</div>
          <div class="box d-inline-block h-3"></div>
          <div class="box d-inline-block vertical-align-bottom">bottom</div>
          <div class="box d-inline-block h-2"></div>
          <div class="box d-inline-block vertical-align-bottom">bottom</div>
          <div class="box d-inline-block vertical-align-middle">middle</div>
          <div class="box"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block vertical-align-middle">middle</div>
          <div class="box d-inline-block vertical-align-bottom">bottom</div>
          <div class="box d-inline-block h-2"></div>
          <div class="box d-inline-block"></div>
          <div class="box d-inline-block vertical-align-middle">middle</div>
          <div class="box d-inline-block"></div>
        </div>
      </div>
      <div class="example" id="example-position-absolute">
        <div class="example__title">(5) position: absolute</div>
        <div class="example__content">
            <div id="box-absolute-top-left" class="box"></div>
            <div id="box-absolute-top-right" class="box"></div>
            <div id="box-absolute-bottom-left" class="box"></div>
            <div id="box-absolute-bottom-right" class="box"></div>
            <div id="box-absolute-center" class="box"></div>
        </div>
      </div>
      <div class="example" id="example-dropdown-menu">
        <div class="example__title">(5) Dropdown menu</div>
        <div class="example__content">
          <div class="dropdown-menu">
            <div class="dropdown-item">Dropdown item text</div>
            <div class="dropdown-item">Action</div>
            <div class="dropdown-item">Another action</div>
            <div class="dropdown-item">Something else here</div>
          </div>
        </div>
      </div>
      <div class="example" id="example-inline-block-nesting">
        <div class="example__title">(5) Inline block nesting</div>
        <div class="example__content">
          <div id="example-inline-block-nesting__block-1">
            <div class="box d-inline-block">inline-block > inline-block</div>
            <div class="box d-inline-block">inline-block > inline-block</div>
            <div class="box">inline-block > block</div>
            <div class="box">inline-block > block</div>
          </div>
          <div id="example-inline-block-nesting__block-2">
            <div class="box d-inline-block">absolute-position > inline-block</div>
            <div class="box d-inline-block">absolute-position > inline-block</div>
            <div class="box">absolute-position > block</div>
            <div class="box">absolute-position > block</div>
          </div>
        </div>
      </div>
      <div class="example" id="example-progress-bar">
        <div class="example__title">(5) Absolutely positioned progress bar</div>
        <div class="example__content">
          <div class="message-box">
            <div>loading...</div>
            <div class="progress">
              <div class="progress-bar" id="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
